<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
    <link href="/plugins/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <link href="/img/ctbulogo.jpg" rel="icon" ,type="image/x-icon">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }

        .container {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 100%;
        }

        .left {
            flex: 0.5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            background-color: #11b5fc;
        }

        .right {
            flex: 4;
            display: flex;
            flex-direction: column;
            background-color: #fff;
        }

        .right-top {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: #e1e0e0;
            border: 5px solid #d5d4d4;
            border-radius: 5px;
        }

        .right-bottom {
            flex: 4;
        }

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f3f1f1;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }

        #b3 {
            border: none;
            cursor: pointer;
            font-family: 微软雅黑;
            font-weight: 700;
            height: 50px;
            width: 80px;
        }

        #b1, #b2,#b,#b4 {
            border: none;
            cursor: pointer;
            font-family: 微软雅黑;
            font-weight: 700;
            height: 40px;
            width: 80px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <div>
            <img alt="Avatar" src="/img/a.jpg">
        </div>
        <div>
            <p style="font-size:20px;font-family:华文楷体;font-weight: 700">管理员</p>
        </div>
        <div>
            <label for="options" style="font-size:20px;font-family:华文楷体;font-weight: 700">管理信息选择</label>
            <select class="form-control" id="option" name="option">
                <option>教师信息</option>
                <option>学生信息</option>
                <option>课程信息</option>
            </select>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <button class="btn btn-primary"  data-toggle="modal" onclick="Apassword();" id="b">修改密码</button>
            <button class="btn btn-primary" data-target="#tModal" data-toggle="modal" id="b1" onclick="preAddt();">
                新增教师
            </button>
            <button class="btn btn-primary" data-target="#sModal" data-toggle="modal" id="b2" onclick="preAdds();">
                新增学生
            </button>
            <button class="btn btn-primary" data-target="#cModal" data-toggle="modal" id="b4" onclick="preAddc();">
                新增课程
            </button>
            <button class="btn btn-primary" id="b3" onclick="logout();">退出登录</button>
        </div>
        <div class="right-bottom">
            <div class="container-fluid">
                <form class="form-inline">
                    <label for="options">查询方式</label>
                    <select class="form-control" id="options" name="options">
                        <option>姓名</option>
                        <option>学号</option>
                    </select>
                    <div class="form-group">
                        <input ,name="search" class="form-control" id="search" placeholder="请输入需要查询的关键字"
                               type="text">
                        <button class="btn btn-default btn-primary" onclick="reads();" type="button">查询</button>
                    </div>

                </form>
                <table class="table table-bordered" id="Table">
                </table>
            </div>
            <div class="modal fade" id="sModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">学生信息</h4>
                        </div>
                        <form id="formstudent">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="sname">姓名</label>
                                    <input class="form-control" id="sname"
                                           name="sname" placeholder="请输入姓名" type="text">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" id="sno" name="sno" placeholder="系统自动生成"
                                           readonly
                                           type="hidden">
                                </div>
                                <div class="form-group">
                                    <label for="password">密码</label>
                                    <input autocomplete="off" class="form-control" id="password" name="password"
                                           placeholder="请输入密码" type="text">
                                </div>
                                <div class="form-group">
                                    <label for="sex">性别</label>
                                    <select class="form-control" id="sex" name="sex">
                                        <option value="0">保密</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="age">年龄</label>
                                    <input class="form-control" id="age" name="age" placeholder="请输入年龄"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="classs">班级</label>
                                    <input class="form-control" id="classs" name="classs" placeholder="请输入班级"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="college">学院</label>
                                    <input class="form-control" id="college" name="college" placeholder="请输入学院"
                                           type="text">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" onclick="savestudent()" type="button">提交保存</button>
                            </div>
                        </form>
                        <!--表单结束-->
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <div class="modal fade" id="tModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">教师信息</h4>
                        </div>
                        <form id="formteacher">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="tname">姓名</label>
                                    <input class="form-control" id="tname"
                                           name="tname" placeholder="请输入姓名" type="text">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" id="tno" name="tno" placeholder="系统自动生成"
                                           readonly
                                           type="hidden">
                                </div>
                                <div class="form-group">
                                    <label for="tpassword">密码</label>
                                    <input autocomplete="off" class="form-control" id="tpassword" name="tpassword"
                                           placeholder="请输入密码" type="text">
                                </div>
                                <div class="form-group">
                                    <label for="tsex">性别</label>
                                    <select class="form-control" id="tsex" name="tsex">
                                        <option value="0">保密</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="tage">年龄</label>
                                    <input class="form-control" id="tage" name="tage" placeholder="请输入年龄"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="job">职位</label>
                                    <input class="form-control" id="job" name="job" placeholder="请输入职位"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <label for="section">部门</label>
                                    <input class="form-control" id="section" name="section" placeholder="请输入部门"
                                           type="text">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" onclick="saveteacher();" type="button">提交保存</button>
                            </div>
                        </form>
                        <!--表单结束-->
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <div class="modal fade" id="aModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改密码</h4>
                        </div>
                        <form id="formpassword">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="oldpassword">旧密码</label>
                                    <input class="form-control" id="oldpassword"
                                           name="oldpassword" placeholder="请输入旧密码" type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label for="fpassword">新密码</label>
                                    <input class="form-control" id="fpassword" name="fpassword" placeholder="请输入新密码"
                                           type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <label for="spassword">新密码</label>
                                    <input class="form-control" id="spassword" name="spassword"
                                           placeholder="请再次输入新密码" type="password" autocomplete="off">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" id="passwords" name="passwords" type="hidden">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" onclick="savepassword();" type="button">提交保存</button>
                            </div>
                        </form>
                        <!--表单结束-->
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <div class="modal fade" id="cModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">课程信息</h4>
                        </div>
                        <form id="formcourse">
                            <div class="modal-body">
                                <div class="form-group">
                                    <input class="form-control" id="cid"
                                           name="cid" placeholder="请输入课程编号" readonly type="hidden">
                                </div>
                                <div class="form-group">
                                    <label for="cname">课程名称</label>
                                    <input class="form-control" id="cname" name="cname" placeholder="请输入课程名称" type="text">
                                </div>
                                <div class="form-group">
                                    <label for="tno">工号</label>
                                    <input class="form-control" id="tno" name="tno" placeholder="请输入教师工号"
                                           type="text">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" onclick="savecourse()" type="button">提交保存</button>
                            </div>
                        </form>
                        <!--表单结束-->
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </div>
    </div>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/bootstraptable/jqueryvalidate/jquery.validate.min.js"></script>
<script src="/plugins/bootstraptable/jqueryvalidate/localization/messages_zh.min.js"></script>
<script type="text/javascript">
    function logout() {
        $.ajax({
            url: "/webapi/admin/logout"
        }).done(function (rs) {
            if (confirm("正在进行退出登录操作，确定吗？")) {
                if (rs >= 0) {
                    //成功
                    window.location.href = "/login/logins";
                } else {
                    alert("退出登录失败！");
                }
            }

        })
    }
    function Apassword(){
        $("#oldpassword").val("");
        $("#fpassword").val("");
        $("#spassword").val("");
        $("#passwords").val("");
        $("#aModal").modal("show");
        $.ajax({
            url: "/webapi/admin/get"
        }).done(function (rs) {
            $("#passwords").val(rs);
        })
    }
    function savepassword(){
        var oldpassword=$("#oldpassword").val();
        var fpassword=$("#fpassword").val();
        var spassword=$("#spassword").val();
        var password=$("#passwords").val();
        if (oldpassword!=password){
            alert("旧密码错误!");
            return;
        }else if (fpassword!=spassword){
            alert("新密码不一致!");
            return;
        }else if (fpassword==oldpassword){
            alert("新密码与旧密码相同!");
        }else{
            $.ajax({
                url: "/webapi/admin/save/"+fpassword,
                method: "put",
            }).done(function () {
                alert("修改成功！");
                $("#aModal").modal("hide");
            })
        }
    }
    function preAdds() {
        $("#sno").val(0);//提示新增
        $("#sname").val("");
        $("#password").val("");
        $("#sex").val("0");
        $("#age").val("");
        $("#classs").val("");
        $("#college").val("");
    }
    function preAddc() {
        $("#cid").val(0);//提示新增
        $("#cname").val("");
        $("#tno").val("");
    }
    function preAddt() {
        $("#tno").val(0);//提示新增
        $("#tname").val("");
        $("#tpassword").val("");
        $("#tsex").val("0");
        $("#tage").val("");
        $("#job").val("");
        $("#section").val("");
    }
    function reads() {
        $('#Table').bootstrapTable("destroy");
        loadTable();
    }
    function saveteacher() {
        var data = $("#formteacher").serialize();
        var id = $("#tno").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/teacher/insert",
                method: "post",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#tModal").modal("hide");
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/teacher/update",
                method: "put",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#tModal").modal("hide");
            })
        }
    }
    //新增或者更新
    function savestudent() {
        var data = $("#formstudent").serialize();
        var id = $("#sno").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#sModal").modal("hide");
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/student/update",
                method: "put",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#sModal").modal("hide");
            })
        }
    }
    function savecourse() {
        var data = $("#formcourse").serialize();
        var id = $("#cid").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/course/insert",
                method: "post",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#cModal").modal("hide");
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/course/update",
                method: "put",
                data: data
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
                $("#cModal").modal("hide");
            })
        }
    }
    function deletestudent(sno) {
        if (confirm("正在进行删除操作，确定吗？")) {
            $.ajax({
                url: "/webapi/student/delete/" + sno,
                method: "delete",
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
            })
        }
    }
    function deleteteacher(tno) {
        if (confirm("正在进行删除操作，确定吗？")) {
            $.ajax({
                url: "/webapi/teacher/delete/" + tno,
                method: "delete",
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
            })
        }
    }
    function deletecourse(cid) {
        if (confirm("正在进行删除操作，确定吗？")) {
            $.ajax({
                url: "/webapi/course/delete/" + cid,
                method: "delete",
            }).done(function () {
                $('#Table').bootstrapTable("destroy");
                loadTable();
            })
        }
    }
    function editteacher(no) {
        $("#tModal").modal("show");
        $.ajax({
            url: "/webapi/teacher/get/" + no
        }).done(function (rs) {
            $("#tno").val(rs.tno);
            $("#tname").val(rs.tname);
            $("#tpassword").val(rs.tpassword);
            $("#tsex").val(rs.tsex);
            $("#tage").val(rs.tage);
            $("#job").val(rs.job);
            $("#section").val(rs.section);
        })
    }
    function editstudent(no) {
        $("#sModal").modal("show");
        $.ajax({
            url: "/webapi/student/get/" + no
        }).done(function (rs) {
            $("#sno").val(rs.sno);
            $("#sname").val(rs.sname);
            $("#password").val(rs.password);
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#classs").val(rs.classs);
            $("#college").val(rs.college);
        })
    }
    function editcourse(no) {
        $("#cModal").modal("show");
        $.ajax({
            url: "/webapi/course/get/" + no
        }).done(function (rs) {
            $("#cid").val(rs.cid);
            $("#cname").val(rs.cname);
            $("#tno").val(rs.tno);
        })
    }
    $("#option").click(function () {
        $('#Table').bootstrapTable("destroy");
        loadTable();
    })
    function loadTable() {
        var position = $("#option").val();
        if (position == "教师信息") {
            $('#Table').bootstrapTable({
                url: '/webapi/teacher/getbypage',
                striped: true,//设置true会有隔行变色效果
                pagination: true,//设置true将禁止多选
                singleSelect: false,//设置true会在底部显示分页条
                pageSize: 10,//如果设置了分页，每页数据条数
                pageNumber: 1,//如果设置了分页，首页页码
                sidePagination: "server",//设置在哪里进行分页，可选值“client”或者“server”
                queryParams: function (parans) {
                    var paraobj = {
                        size: parans.limit,
                        page: parans.offset / parans.limit,
                        sort: "tno",
                        direct: "asc",
                        name: $("#search").val(),
                        farm: $("#options").val(),
                    };
                    return paraobj;
                },
                columns: [{
                    field: 'tno',
                    title: '工号'
                }, {
                    field: 'tname',
                    title: '姓名'
                }, {
                    field: 'tsex',
                    title: '性别',
                    formatter: function (data, row, meta) {
                        if (row.tsex == "0") {
                            var operators = '保密';
                        } else if (row.tsex == "1") {
                            var operators = '男';
                        } else {
                            var operators = '女';
                        }
                        return operators;
                    }
                }, {
                    field: 'tage',
                    title: '年龄'
                }, {
                    field: 'job',
                    title: '职位'
                }, {
                    field: 'section',
                    title: '部门'
                }, {
                    data: null,
                    title: '操作1',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=editteacher(' + row.tno + ') >修改</a>';
                        return operators;
                    }
                }, {
                    data: null,
                    title: '操作2',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=deleteteacher(' + row.tno + ') >删除</a>';
                        return operators;
                    }
                },]
            })
        } else if(position=="学生信息") {
            $('#Table').bootstrapTable({
                url: '/webapi/student/getbypage',
                striped: true,
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                sidePagination: "server",
                queryParams: function (parans) {
                    var paraobj = {
                        size: parans.limit,
                        page: parans.offset / parans.limit,
                        sort: "sno",
                        direct: "asc",
                        name: $("#search").val(),
                        farm: $("#options").val(),
                    };
                    return paraobj;
                },
                columns: [{
                    field: 'sno',
                    title: '学号'
                }, {
                    field: 'sname',
                    title: '姓名'
                }, {
                    field: 'sex',
                    title: '性别',
                    formatter: function (data, row, meta) {
                        if (row.sex == "0") {
                            var operators = '保密';
                        } else if (row.sex == "1") {
                            var operators = '男';
                        } else {
                            var operators = '女';
                        }
                        return operators;
                    }
                }, {
                    field: 'age',
                    title: '年龄'
                }, {
                    field: 'classs',
                    title: '班级'
                }, {
                    field: 'college',
                    title: '学院'
                }, {
                    data: null,
                    title: '操作1',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=editstudent(' + row.sno + ') >修改</a>';
                        return operators;
                    }
                }, {
                    data: null,
                    title: '操作2',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=deletestudent(' + row.sno + ') >删除</a>';
                        return operators;
                    }
                },]
            })
        }else{
            $('#Table').bootstrapTable({
                url: '/webapi/course/getbypage',
                striped: true,
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                sidePagination: "server",
                queryParams: function (parans) {
                    var paraobj = {
                        size: parans.limit,
                        page: parans.offset / parans.limit,
                        sort: "sno",
                        direct: "desc",
                        name: $("#search").val(),
                        farm: $("#options").val(),
                    };
                    return paraobj;
                },
                columns: [{
                    field: 'cid',
                    title: '课程编号'
                }, {
                    field: 'cname',
                    title: '课程名称'
                }, {
                    field: 'tno',
                    title: '工号'
                }, {
                    data: null,
                    title: '操作1',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=editcourse(' + row.cid + ') >修改</a>';
                        return operators;
                    }
                }, {
                    data: null,
                    title: '操作2',
                    width: "70px",
                    formatter: function (data, row, meta) {
                        var operators = '<a type="button"  href="#" class="btn btn-mint btn-xs btn-icon" onclick=deletecourse(' + row.cid + ') >删除</a>';
                        return operators;
                    }
                },]
            })
        }
    }
    $(function () {
        loadTable();
    })
</script>
</body>
</html>